<template>
  <div>
    <div v-if="pointList.length" pa-20rpx>
      <div v-for="(item, index) in pointList" :key="index" flex justify-between bg-white rounded-6rpx mb-12rpx pa-20rpx>
        <div w-480rpx>
          <div>提现金额({{ 
          item.applyStatus == 'APPLY'
              ? '申请中'
              : item.applyStatus == 'VIA_AUDITING'
              ? '审核通过'
              : item.applyStatus == 'SUCCESS'
              ? '提现成功'
              : '审核拒绝'
             }})</div>
          <div text-24rpx pt-12rpx text="#666">{{ item.inspectTime }}</div>
          <div v-if="item.inspectRemark" text-24rpx pt-8rpx break-all text="#666">{{ item.inspectRemark }}</div>
        </div>
        <div flex flex-col items-end>
          <div
            :style="{ color: colors.reduceColor }"
            font-bold
            text-34rpx>
            {{ unitPrice(item.applyMoney, '￥') }}
          </div>
          <div v-if="item.payImg" text-28rpx text-blue mt-6rpx @click="showImage(item)">查看凭证</div>
        </div>
      </div>
    </div>
    
    <div v-else mt-100rpx>
      <empty text="暂无提现记录" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { withdrawalRecord } from '@/api/member'
import empty from '@/components/empty/index.vue'
import { colors } from '@/constants/injection-key'
import type { Search } from '@/constants/types'
import { unitPrice } from '@/utils/filters'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

const searchForm = ref<Search>({
  pageNumber: 1,
  pageSize: 20
})
const pointList = ref<any>([])
const pointData = ref<any>('')

async function init() {
  pointList.value = []
  await fetch()
}

async function fetch() {
  uni.stopPullDownRefresh()
  const res = await withdrawalRecord(searchForm.value)
  if (res.data.success) {
    pointList.value.push(...res.data.result.records)
    pointData.value = res.data.result
  }
}

function showImage(item: any) {
  uni.previewImage({
    urls: [item.payImg],
  })
}

onPullDownRefresh(() => {
  init()
})
onReachBottom(() => {
  if (pointData.value?.total > searchForm.value.pageNumber * searchForm.value.pageSize) {
    searchForm.value.pageNumber++
    fetch()
  }
})

onMounted(() => {
  init()
})
</script>

<style scoped lang="scss"></style>
